<template>
<div v-text="msg" class="div1"></div>
<div v-html="msg1" class="div2"></div>
<button @click="showInfor">点击按钮更换图片</button><br>
姓名:<input type="text" v-model.trim="username "/>
<div>{{ username }}</div>
<p v-if="url"></p >
<p v-show="url"></p >
<button @click="url=!url">点击隐藏</button>
<p v-if="type=='A'">陈佳乐</p >
<p v-if="type=='B'">陈佳乐+2430150139</p >
<button @click="type='B'">切换成姓名+学号</button>
<p v-for="(item,index) in arr":key="index">
    索引值：{{index+1}} --- 元素的内容是：{{item}}
</p >
</template>
<script setup>
const arr=["v-text","v-html","v-bind","v-on","v-model","v-if","v-show","v-for"];
const msg="内置指令"
const msg1="这是陈佳乐的页面"
import {ref} from "vue"
let url=ref(new URL("../assets/img1.png",import.meta.url).href);
const showInfor=()=>{
url.value=new URL("../assets/img2.png",import.meta.url).href;
};
const username =ref("");
const flag=ref(true);
const type = ref("A");
</script>

<style scoped>
.div2{
    font-weight: bold;
}
</style>